<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS样式-懒加载动画</title>
</head>

<body>


  html 代码来源：https://juejin.cn/post/6844903930183303181

  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>

  <script>
    //js
    function onLoad() {
      let list = document.querySelectorAll("ol li");
      let observer = new IntersectionObserver((entries) => {
        entries.forEach((element) => {
          if (element.isIntersecting) {
            element.target.classList.add("show"); // 增加show类名
            observer.unobserve(element.target); // 移除监听
          }
        });
      });
      list.forEach((item) => observer.observe(item));
    }
    onLoad();
  </script>
  <style>
    body {
      max-width: 500px;
      margin: 0 auto;
    }

    ol {
      margin-top: 500px;
      display: flex;
      width: 90%;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      text-align: center;
    }

    ol li {
      width: 40%;
      background-color: aqua;
      width: 150px;
      margin-bottom: 20px;
      height: 150px;
    }

    ol li:nth-child(2n) {
      margin-left: 20px;
    }

    ol li.show {
      /* 默认从左边进来*/
      animation: left 1.4s ease;
    }

    /* 偶数从右边进来*/
    ol li.show:nth-child(2n) {
      animation: right 1.4s ease;
    }

    @keyframes left {
      from {
        opacity: 0;
        transform: translate(-40px, 20px) rotate(80deg);
        /*right动画改成20px, 20px即可*/
      }

      to {
        opacity: 1;
      }
    }

    @keyframes right {
      from {
        opacity: 0;
        transform: translate(40px, 20px) rotate(-80deg);
        /* right动画改成20px, 20px即可*/
      }

      to {
        opacity: 1;
      }
    }
  </style>
</body>

</html>